<template>
    <div class="page_title">
        <p>资产分类设置</p>
    </div>
    <div class="class_info">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>资产大类</span>
                    <i class="el-icon-plus" @click="add(0)"></i>
                </div>
            </template>
            <div class="info_box">
                <div class="info" v-for="(item, i) in list" :key="item.category_id" @click="selse_class(i)">
                    <span>{{item.sort}}</span>
                    <span :class="{'sels_class': i === selse_num}">{{item.category_name}}</span>
                    <div>
                        <el-button size='mini' @click.stop="del(item)">删除</el-button>
                        <el-button size='mini' @click="edit(0, item)">编辑</el-button>
                    </div>
                </div>
            </div>
        </el-card>
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>资产小类</span>
                    <i class="el-icon-plus" @click="add(1)"></i>
                </div>
            </template>
            <div class="info_box">
                <div class="info" v-for="item in child" :key="item.category_id">
                    <span>{{item.sort}}</span>
                    <span>{{item.category_name}}</span>
                    <div>
                        <el-button size='mini' @click="del(item)">删除</el-button>
                        <el-button size='mini' @click="edit(1, item)">编辑</el-button>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
    
    <el-dialog
        width="40%"
        v-model="is_class"
        :title="title"
        :close-on-press-escape='false'
        :close-on-click-modal='false'
        :show-close='false'
        center
    >
        <el-form :model="form" label-position='left' size='small' label-width="80px">
            <el-form-item label="类别序号">
                <el-input type='number' v-model="form.sort" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="类别名称">
                <el-input v-model="form.category_name" placeholder="请输入内容"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="info" round @click="cancel">取消</el-button>
            <el-button type="primary" round @click="sub">确定</el-button>
        </template>
    </el-dialog>
</template>

<script lang="js">
import { defineComponent, reactive, toRefs } from 'vue'
import { class_list, add_class, edit_class, del_class } from './../../utils/api'
import { ElMessage } from 'element-plus'
export default defineComponent({
    setup() {
        let state = reactive({
            list: [],
            child: [],
            selse_num: 0,
            is_class: false,
            title: '新增资产大类',
            form: {},
            is_add: false,
            category_id: -1,
            is_type: 0
        })

        // 初始化
        const init = () => {
            class_list().then(({ data }) => {
                if(data.code === 1000) {
                    if(state.selse_num > 0) {
                        state.child = data.data[state.selse_num].down
                        state.category_id = data.data[state.selse_num].category_id
                    } else {
                        state.child = data.data[0].down
                        state.category_id = data.data[0].category_id
                    }
                    state.list = data.data
                }
            })
        }
        // 删除分类
        const del = item => {
            del_class({category_id: item.category_id}).then(({ data }) => {
                if(data.code === 1000) {
                    ElMessage.success({
                        type: 'success',
                        message: data.msg
                    })
                    init()
                }
            })
        }
        // 选择分类
        const selse_class = i => {
            state.selse_num = i
            state.child = state.list[i].down
            state.category_id = state.list[i].category_id
        }
        // 新增分类
        const add = type => {
            state.is_type = type
            state.title = '新增资产大类'
            if(type) {
                state.title = '新增资产小类'
            }
            state.is_class = true
            state.is_add = true
        }
        // 编辑分类
        const edit = (type, item) => {
            state.is_type = type
            state.title = '编辑资产大类'
            if(type) {
                state.title = '编辑资产小类'
            }
            state.is_class = true
            state.is_add = false;
            state.form.category_name = item.category_name;
            state.form.sort = item.sort;
            state.form.category_id = item.category_id;
        }
        // 确认
        const sub = () => {
            let params = {
                pid: 0
            }
            params = Object.assign(params, state.form)
            if(state.is_type) {
                params.pid = state.category_id
            }
            if(state.is_add) {
                add_class(params).then(({ data }) => {
                    if(data.code === 1000) {
                        ElMessage.success({
                            type: 'success',
                            message: data.msg
                        })
                        state.is_class = false
                        state.form = {}
                        init()
                    }
                })
            } else {
                edit_class(params).then(({ data }) => {
                    if(data.code === 1000) {
                        ElMessage.success({
                            type: 'success',
                            message: data.msg
                        })
                        state.is_class = false
                        state.form = {}
                        init()
                    }
                })
            }
        }
        // 取消
        const cancel = () => {
            state.form = {}
            state.is_class = false
        }

        init()
        return {
            ...toRefs(state),
            cancel,
            add,
            sub,
            edit,
            selse_class,
            del
        }
    }
})
</script>

<style lang="scss" scoped>
.class_info{
    display: flex;
    .el-card{
        width: 350px;
        margin-left: 50px;
        &:first-child{
            margin-left: 0;
        }
        .card-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            span{
                font-size: 24px;
            }
            .el-icon-plus{
                cursor: pointer;
                font-size: 24px;
                font-weight: bold;
            }
        }
        .info_box{
            .info{
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                line-height: 28px;
                margin-bottom: 16px;
                &:last-child{
                    margin-bottom: 0;
                }
                .sels_class{
                    color: #C91229;
                }
                span{
                    &:first-child{
                        display: inline-block;
                        width: 20px;
                    }
                }
            }
        }
    }
}
</style>